<section class="section">
  <div class="row">
    <div class="col-lg-6">

      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Quill Editor Default</h5>

          <!-- Quill Editor Default -->
          <div class="quill-editor-default" data-controller="editors--quill" data-editors--quill-options-value='{"theme":"snow"}'>
            <p>Hello World!</p>
            <p>This is Quill <strong>default</strong> editor</p>
          </div>
          <!-- End Quill Editor Default -->

        </div>
      </div>

      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Quill Editor Bubble</h5>

          <!-- Quill Editor Bubble -->
          <p>Select some text to display options in poppovers</p>
          <div class="quill-editor-bubble" data-controller="editors--quill" data-editors--quill-options-value='{"theme":"bubble"}'>
            <p>Hello World!</p>
            <p>This is Quill <strong>bubble</strong> editor</p>
          </div>
          <!-- End Quill Editor Bubble -->

        </div>
      </div>

      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Quill Editor Full</h5>

          <!-- Quill Editor Full -->
          <p>Quill editor with full toolset</p>
          <div class="quill-editor-full" data-controller="editors--quill" data-editors--quill-options-value='{"modules":{"toolbar":[[{"font":[]},{"size":[]}],["bold","italic","underline","strike"],[{"color":[]},{"background":[]}],[{"script":"super"},{"script":"sub"}],[{"list":"ordered"},{"list":"bullet"},{"indent":"-1"},{"indent":"+1"}],["direction",{"align":[]}],["link","image","video"],["clean"]]},"theme":"snow"}'>
            <p>Hello World!</p>
            <p>This is Quill <strong>full</strong> editor</p>
          </div>
          <!-- End Quill Editor Full -->

        </div>
      </div>

    </div>

    <div class="col-lg-6">

      <div class="card">
        <div class="card-body">
          <h5 class="card-title">TinyMCE Editor</h5>

          <!-- TinyMCE Editor -->
          <textarea class="tinymce" data-controller="editors--tinymce">
            <p>Hello World!</p>
            <p>This is TinyMCE <strong>full</strong> editor</p>
          </textarea><!-- End TinyMCE Editor -->

        </div>
      </div>
    </div>
  </div>
</section>
